<template>
	<view class="container">
		<loading :show="loading_show"></loading>
		<customHead
			title="优惠券"
			@headHeight="headHeightCall"
			isShowBackArrow
			:titlePaddingLeft="30"
			navi_background="#fff"
			:placeholder="true"
		>
			<view class="tabs" :scrollable="false">
				<u-tabs
					:list="list"
					lineWidth="30"
					:lineColor="_temp_themeColor"
					@change="tabsChange"
					:activeStyle="{
						color: _temp_themeColor,
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}"
					:inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}"
					itemStyle="padding-left: 80rpx; padding-right: 80rpx;padding-top: 10rpx;padding-bottom:10rpx; height: 60rpx;"
				></u-tabs>
			</view>
		</customHead>
		<view class="main_content" v-if="naviHeight">
			<view class="couponList">
				<view class="coupon_item" v-for="(item, index) in couponList" :key="index">
					<view class="coupon_item_main">
						<view class="item_left">
							<view class="icon">
								<text class="couponType" v-if="item.plugsCoupons.couponType==0" >满减券</text>
								<text class="couponType" v-else-if="item.plugsCoupons.couponType==2" >积分券</text>
								<text class="couponType" v-else-if="item.plugsCoupons.couponType==3" >折扣券</text>
								<text class="couponType" v-else-if="item.plugsCoupons.couponType==1" >口令券</text>
							</view>
							<view class="amount">
								<view class="money" v-if="item.couponType == 0 || item.couponType == 1">
									<text class="text">￥</text>
									<span class="span">{{item.plugsCoupons.couponDenomination}}</span>
								</view>
								<view class="money" v-else-if="item.couponType == 2">
									<span class="span">{{item.plugsCoupons.couponDenomination}}</span>
									<text class="text">积分</text>
								</view>
								<view class="money" v-else-if="item.couponType == 3">
									<span class="span">{{item.plugsCoupons.couponDenomination * 10}}</span>
									<text class="text">折</text>
								</view>
							</view>
							
							<view class="desc" v-if="item.couponType == 0 || item.couponType == 1 || item.couponType == 3">
								<text>满{{item.plugsCoupons.howMuchFullMoney}}可用</text>
							</view>
						</view>
						<view class="item_right">
							<view class="right_left">
								<text class="desc">{{item.couponName}}</text>
								<text class="date" v-if="item.plugsCoupons.timeType == 1">{{setDate(item.plugsCoupons)}}内有效</text>
								<text class="date" v-if="item.plugsCoupons.timeType == 2">领取后{{item.plugsCoupons.timeDay}}天内有效</text>
							</view>
							<view class="couponType">
								<text v-if="item.plugsCoupons.goodsType == 1">全部商品可用</text>
								<text v-if="item.plugsCoupons.goodsType == 2">指定商品可用</text>
							</view>
							<view class="bottom">
								<view class="item" @click="clickItem(index)">
									<text>展开详情</text>
									<u-icon name="arrow-down" color="#9d9d9d" size="14"></u-icon>
								</view>
								<view class="right_right">
									<button :style="{backgroundColor: _temp_themeColor}" class="button _btn_base" @click="useCoupon(item)" v-if="item.status == 0">
										<text>去使用</text>
									</button>
									<button :style="{backgroundColor: _temp_themeColor}" class="button unusable" v-if="item.status == 2">
										<text>已使用</text>
									</button>
									<button :style="{backgroundColor: _temp_themeColor}" class="button unusable" v-if="item.status == 3">
										<text>已过期</text>
									</button>
								</view>
							</view>
							
						</view>
					</view>
					<view class="slide_dowm" :class="[couponIndex==index?'show':'hide']">
						<uv-parse :content="item.detail"></uv-parse>
					</view>
				</view>
				<view class="emptyGoods" v-if="!couponList.length">
					<u-empty
						text="暂无优惠券"
						mode="data"
						icon="http://cdn.uviewui.com/uview/empty/data.png"
					>
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchPlugsCouponsByUserId,
		receiveCoupons
	} from "@/tools/request/api.js"
	export default {
		data() {
			return {
				naviHeight: 0,
				list: [
					{
						name: '未使用',
						
					},
					{
						name: '已使用'
					},
					{
						name: '已过期',
						
					}
				],
				couponList: [],
				couponIndex: -1,
				orderPage: {
					page: 1,
					size: 10
				},
				userToken: '',
				loading_show: false
			};
		},
		onLoad () {
			this.getMycouponList(0);
		},
		computed: {
			setDate () {
				return function (item) {
					if (!item.startTime || !item.endTime) return;
					let dateStr = '';
					let startTime = item.startTime.split(' ')[0];
					let endTime = item.endTime.split(' ')[0];
					return startTime + ' 至 ' +  endTime;
				}
			}
		},
		methods: {
			clickItem (index) {
				if (this.couponIndex == index) return this.couponIndex = -1;
				this.couponIndex = index;
			},
			useCoupon (item) {
				uni.navigateTo({
					url: `/subpack_my/coupon/useCoupon/useCoupon?couopnId=${item.couponId}`
				})
			},
			tabsChange (e) {
				this.getMycouponList(e.index);
			},
			// 去使用优惠券
			
			// 获取优惠券列表
			getMycouponList(status) {
				this.loading_show = true;
				let postdata = {
					businessId: this.businessId,
					status: status
				}
				searchPlugsCouponsByUserId(postdata).then((res) => {
					this.loading_show = false;
					if (res.code == 200) {
						this.couponList = res.body.list;
					} else {
						uni.$showMsg(res.msg)
					}
				});
			}
		},
		onReachBottom () {
			console.log('触底')
		},
		onPullDownRefresh () {
			console.log('下拉')
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		onPageScroll (e) {
			console.log(e)
		}
		
	}
</script>


<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		
		.tabs{
			display: flex;
			justify-content: center;
		}
		
		.main_content{
			width: 100%;
			
			.couponBanner{
				width: 100%;
				height: 500rpx;
			}
			.couponList{
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
				
				.coupon_item{
					width: 100%;
					display: flex;
					flex-direction: column;
					margin-bottom: 20rpx;
					
					.coupon_item_main{
						width: 100%;
						height: 240rpx;
						display: flex;
						position: relative;
						overflow: hidden;
						
						.item_left{
							width: 30%;
							height: 100%;
							background-color: #FFE3E5;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							position: relative;
							border-radius: 20rpx;
							
							.icon{
								position: absolute;
								top: 0;
								left: 0;
								border-top-left-radius: 20rpx;
								border-bottom-right-radius: 20rpx;
								background-color: #FF1414;
								color: #fff;
								font-size: 24rpx;
								padding: 6rpx 20rpx;
							}
							
							.amount{
								
								.money{
									display: flex;
									
									.text{
										color: #FF1414;
										display: flex;
										align-items: flex-end;
										padding-bottom: 8rpx;
									}
									.span{
										font-size: 64rpx;
										font-weight: bold;
										color: #FF1414;
									}
								}
							}
							
							.desc{
								color: #FF1414;
								font-size: 26rpx;
							}
							
							
							
						}
						.item_right{
							height: 100%;
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							background-color: #fff;
							border-radius: 20rpx;
							padding: 20rpx 20rpx;
							box-sizing: border-box;
							
							.couponType{
								text{
									border-radius: 14rpx;
									background-color: #FF1414;
									color: #fff;
									font-size: 24rpx;
									padding: 6rpx 10rpx;
								}
							}
							
							.right_left{
								display: flex;
								flex-direction: column;
								
								.desc{
									font-size: 34rpx;
									font-weight: bold;
									padding-bottom: 10rpx;
								}
								.date{
									font-size: 24rpx;
									color: #747474;
									font-weight: bold;
								}
							}
							
							
							.bottom{
								display: flex;
								justify-content: space-between;
								align-items: center;
								
								.item{
									display: flex;
									color: #9d9d9d;
									font-size: 26rpx;
								}
								.right_right{
									display: flex;
									align-items: center;
									
									.button{
										width: 130rpx;
										height: 50rpx;
										border-radius: 25rpx;
										font-size: 28rpx;
										color: #fff;
										padding: 0;
									}
									.unusable{
										background-color: $theme-color;
										opacity: 0.6;
										display: flex;
										justify-content: center;
										align-items: center;
									}
									.usable{
										background-color: $theme-color;
										display: flex;
										justify-content: center;
										align-items: center;
									}
								}
							}
							
						}
						
					}
					.slide_dowm{
						width: 100%;
						background-color: #fff;
						font-size: 28rpx;
						color: #7e7e7e;
						padding: 30rpx;
						box-sizing: border-box;
						border-bottom-left-radius: 20rpx;
						border-bottom-right-radius: 20rpx;
						// position: absolute;
						// bottom: 0;
					}
					.show{
						display: block;
						animation-name: show;
						animation-duration: 0.4s;
						animation-fill-mode: forwards;
					}
					.hide{
						display: none;
						animation-name: hide;
						animation-duration: 0.4s;
						animation-fill-mode: forwards;
					}
					@keyframes show {
						from{
							opacity: 0;
						} to {
							opacity: 1;
						}
					}
					@keyframes hide {
						from{
							opacity: 1;
						} to {
							opacity: 0;
						}
					}
					
				}
			}
		}
	}
</style>
